<template>
    <div class='goodsadd'>
        <el-alert title="添加商品信息" type="info" center show-icon :closable="false" style="margin:26px 0 10px"></el-alert>
        <el-steps :active="+active" align-center finish-status="success">
            <el-step title="基本信息"></el-step>
            <el-step title="商品参数"></el-step>
            <el-step title="商品属性"></el-step>
            <el-step title="商品图片"></el-step>
            <el-step title="商品内容"></el-step>
        </el-steps>
        <el-tabs tab-position="left" style="height: 400px;" v-model="active">
            <el-tab-pane label="基本信息" name="1">
                <el-form :rules="rules" ref="formMessage"
                label-position="top" label-width="80px" :model="formMessage">
                    <el-form-item label="商品名称" prop="goods_name"
                    :rules="[
                        { required: true, message: '请输入商品名称', trigger: 'blur' }
                    ]">
                        <el-input v-model="formMessage.goods_name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="goods_price"
                    :rules="[
                        { required: true, message: '请输入商品价格', trigger: 'blur' }
                    ]">
                        <el-input v-model="formMessage.goods_price"></el-input>
                    </el-form-item>
                    <el-form-item label="商品重量" prop="goods_weight">
                        <el-input v-model="formMessage.goods_weight"></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量" prop="goods_number"
                    :rules="[
                        { required: true, message: '请输入商品数量', trigger: 'blur' }
                    ]">
                        <el-input v-model="formMessage.goods_number"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类" prop="goods_cat"
                    :rules="[
                        { required: true, message: '请输入商品分类', trigger: 'blur' }
                    ]">
                        <el-cascader v-model="formMessage.goods_cat" :options="options" :clearable="true" :props="{ expandTrigger: 'hover',value:'cat_id',label:'cat_name'}"></el-cascader>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="商品参数" name="2">
                <el-form label-position="top">
                    <el-form-item :label="item.attr_name" v-for="item in catParams" :key="item.attr_id">
                        <el-checkbox-group v-model="item.attr_vals">
                            <el-checkbox :value="it" :label="it" border v-for="(it,index) in item.attr_vals" :key="index"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="商品属性" name="3">
                <el-form label-position="top">
                    <el-form-item :label="item.attr_name" v-for="item in attrForm" :key="item.attr_id">
                        <el-input v-model="item.attr_vals"></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="商品图片" name="4">
                <el-upload
                :action="uploadURL"
                :headers="headers"
                :file-list="fileList"
                :on-success="dealSuccess"
                :on-remove="dealRemove"
                list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-tab-pane>
            <el-tab-pane label="商品内容" name="5">
                <el-button @click="addGoods">添加商品</el-button>
                <quill-editor v-model="formMessage.goods_introduce"></quill-editor>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import {categoriesList,getCatParamsList,addGoods} from '../../http/api'
import {uploadURL} from '../../http'
// 富文本编辑器引入文件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
    data() {
        var checkWeight = function(rule, value, callback) {
            if (!value) {
                return callback(new Error('重量不能为空'));
            }
            if (isNaN(Number(value))||typeof(Number(value))!=='number') {
                return callback(new Error('请输入数字'));
            }else {
                if (Number(value)<=0) {
                    return callback(new Error('重量必须大于0'));
                }else{
                    callback();
                }
            }
        }
        return {
            active: '1', //步骤条与左侧tab对应
            formMessage: { //商品信息
                goods_name: '',
                goods_price: '',
                goods_weight: '',
                goods_number: '',
                goods_cat: '',
                goods_introduce: '',
                pics: [],
                attrs: []
            },
            options: [], //商品分类
            rules: { //验证表单
                goods_weight: [
                    {
                        validator: checkWeight,
                        trigger: ['blur','change']
                    }
                ]
            },
            catParams: [], //商品参数
            attrForm: [], //商品属性
            uploadURL: uploadURL, //图片路径
            fileList: [], //图片列表
            headers: { //请求头部
                'Authorization': this.$store.state.token
            }
        }
    },
    methods: {
        categoriesList(){ //商品数据列表
            return categoriesList().then(res=>{
                this.options = res.data;
                console.log(res.data);
            })
        },
        async getCatParamsList(){ //动态参数列表
            const res = await getCatParamsList(this.formMessage.goods_cat[2]);
            const _res = res.map(item=>{
                item.attr_vals = item.attr_vals.split(',')
                return item;
            })
            this.catParams = _res;
        },
        async getAttrList(){ //静态参数列表
            const res = await getCatParamsList(this.formMessage.goods_cat[2],'only');
            this.attrForm = res;
            console.log(res)
        },
        async addGoods(){ //添加商品
            await addGoods({
                ...this.formMessage,
                goods_cat:this.formMessage.goods_cat.join(','),
                goods_price:+this.formMessage.goods_price,
                goods_number:+this.formMessage.goods_number,
                goods_weight:+this.formMessage.goods_weight
            })
            this.$router.replace({name: 'goodslist'});
        },
        dealSuccess(...args){ //文件上传成功时的钩子
            this.fileList=args[2];
        },
        dealRemove(...args){ //文件列表移除文件时的钩子
            this.fileList=args[1];
        }
    },
    watch:{
        'active':{ //监听完成到第几步
            handler(val,oldVal){
                if (val==='2'&&oldVal==='1') {
                    this.$refs.formMessage.validate((valid)=>{
                        if (!valid) {
                            this.$message({
                                type: 'warning',
                                message: '请输入必填项'
                            })
                        }else{
                            this.getCatParamsList();
                        }
                    })
                }else if (val==='3') {
                    this.getAttrList();
                }
            }
        },
        'fileList':{ //监听上传图片的临时路径
            deep: true,
            handler(val){
                let arr = [];
                val.map(item => {
                    let obj = {pic: item.response.data.tmp_path};
                    arr.push(obj);
                })
                console.log(val);
                this.formMessage.pics = arr;
            }
        },
        'catParams':{ //监听商品参数
            deep: true,
            handler(val){
                let arr = [];
                val.map(item=>{
                    let obj = {attr_id:item.attr_id,attr_value:item.attr_vals.join(',')};
                    arr.push(obj);
                })
                this.formMessage.attrs = arr;
            }
        }
    },
    created(){
        this.categoriesList();
    },
    components: { //注册富文本编辑器
        quillEditor
    }
}
</script>
<style lang='scss' scoped>
.el-checkbox{
    margin-right: 0;
    // +.el-checkbox{
    //     margin-right: 0;
    // }
}

</style>